<template>
  <div class="classify">
    <h3>分类</h3>
    <Input @click="goSearch" />
    <div class="box">
      <div class="left">
        <span
          v-for="(item, index) in leftTab"
          :key="index"
          :class="active == index ? 'active' : ''"
          @click="btn(index)"
        >
          {{ item.name }}
        </span>
      </div>
      <div class="right" @scroll="eleScroll" ref="scrollEle">
        <div v-for="(item, index) in leftTab" :key="index" class="box1">
          <h2>{{ item.name }}</h2>
          <div class="item">
            <div v-for="(it, i) in item.rankList" :key="i">
              <Item :item="it"></Item>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Item from "@/components/Item.vue";
import Input from "@/components/Input.vue";

import { defineComponent, reactive, computed, ref, watch } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

export default defineComponent({
  components: {
    Item,
    Input,
  },
  setup(propd, context) {
    const state = reactive({
      leftTab: [], //tab切换数组
      mid: 0,
    });
    let { mid } = state;
    let store = useStore();
    store.dispatch("classify/getSortList", { mid });

    let scrollEle = ref();
    let childHeight = reactive([]);
    let active = ref(0);
    let flag = ref(false);
    //监听滚动事件
    function eleScroll(e) {
      let ele = e.currentTarget;
      let wrapHeight = ele.getBoundingClientRect().height;
      console.log(ele);
      let _childHeight = [...ele.children].map((item) => {
        return item.getBoundingClientRect().height;
      });
      _childHeight = _childHeight.map((item, index) => {
        return _childHeight.slice(0, index + 1).reduce((total, value) => {
          return (total += value);
        }, 0);
      });
      childHeight = _childHeight;
      //计算滚动距离
      let scollHeight = e.currentTarget.scrollTop;

      let index = _childHeight.findIndex((item) => item > scollHeight);
      active.value = index;
    }
    // tab切换
    function btn(index) {
      flag.value = true;
      active.value = index;
    }
    // 监听active实现右向左联动
    watch(active, (value) => {
      if (flag.value) {
        scrollEle.value.scrollTop = value ? childHeight[value - 1] : 0;
        console.log("scrollEle", scrollEle);
      }
      flag.value = false;
    });

    let Router = useRouter();
    function goSearch() {
      Router.push("/search");
    }
    return {
      leftTab: computed(() => store.state.classify.leftTab),
      eleScroll,
      scrollEle,
      active,
      btn,
      goSearch,
    };
  },
});
//   data() {
//     return {
//       list: [],
//       carIndex: 0,
//       rightList: [],
//     };
//   },
//   components: {
//     Item,
//   },
//   mounted() {
//     this.getSortList();
//   },
//   methods: {
//     //左侧tab切换
//     btn(index) {
//       this.carIndex = index;
//       this.rightList = this.list[index].rankList;
//     },
//     async getSortList() {
//       let res = await getSortList({
//         mid: "0",
//       });
//       this.list = res.dataList;
//       this.rightList = res.dataList[0].rankList;

//       console.log(res.dataList, 1111);
//     },
//   },
</script>

<style lang="scss">
.classify {
  width: 100%;
  height: 100%;
  > h3 {
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
  }
  .box {
    display: flex;
    width: 100%;
    height: calc(100% - 3.2rem - 3rem);
    .right {
      width: calc(100% - 6rem);
      overflow-y: scroll;
      .box1 {
        width: 100%;
        > h2 {
          width: 100%;
          height: 2rem;
          text-align: left;
          text-indent: 1rem;
          font-weight: 700;
        }
        .item {
          display: flex;
          flex-wrap: wrap;

          > div {
            width: 33%;
            height: 7rem;
            font-size: 0.9rem;
            img {
              width: 4.2rem;
              height: 4.2rem;
              margin: 0.2rem 0;
            }
          }
        }
      }
    }
    .left {
      width: 6rem;
      height: 100%;
      display: flex;
      flex-direction: column;
      background: rgb(248, 246, 246);
      .active {
        background: #fff;
        color: purple;
      }
      color: #333;
      span {
        width: 100%;
        height: 3rem;
        line-height: 3rem;
        text-align: center;
      }
    }
  }
}
</style>